<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传预览</title>
  <script type="text/javascript">
    function imgPreview(fileDom){
      //判断是否支持FileReader
      if (window.FileReader) {
        var reader = new FileReader();
      } else {
        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
      }
      //获取文件
      var file = fileDom.files[0];
      var imageType = /^image\//;
      //是否是图片
      if (!imageType.test(file.type)) {
        alert("请选择图片！");
        return;
      }
      //读取完成
      reader.onload = function(e) {
        //获取图片dom
        var img = document.getElementById("preview");
        //图片路径设置为读取的图片
        img.src = e.target.result;
        alert("图片路径："+img.src)
      };
      reader.readAsDataURL(file);
    }
    function contentLoaded() {

      document.getElementById('file').addEventListener('change',

              ProcessFile, false);

    }

    window.addEventListener("DOMContentLoaded", contentLoaded, false);
  </script>
</head>
<body>
<input type="file" name="file" onchange="imgPreview(this)" />
</body>
</html>
